<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>商品名称</title>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jqzoom.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/picture.js"></script>
    <script type="text/javascript" src="js/cart.js"></script>

</head>

<body id="goods">

<!--页面头部-->
<div id="header"></div>
<script>$("#header").load("_header.html");</script>
<!--/页面头部-->

<div id="app">
    <!--当前位置-->
    <div class="section">
        <div class="location">
            <span>当前位置：</span>
            <a href="index.html">首页</a> &gt;
            <a href="goods.html">购物商城</a>

            <!-- 面包屑导航 -->
            &nbsp;&gt;&nbsp;<a :href="'list.html?category=' + goods.category.parent.id">{{ goods.category.parent.title }}</a>&nbsp;&gt;&nbsp;
            <a :href="'list.html?category=' + goods.category.id">{{ goods.category.title }}</a>

        </div>
    </div>
    <!--/当前位置-->

    <div class="section">
        <div class="wrapper clearfix">
            <div class="wrap-box">
                <!--页面左边-->
                <div class="left-925">
                    <div class="goods-box clearfix">
                        <!--商品图片-->
                        <div class="goods-pic">
                            <!--幻灯片-->
                            <div class="pic-box">
                                <div class="pic-preview">
                                <span class="jqzoom">
                                    <img :src="goods.goodsalbum_set[0].original_path"/>
                                </span>
                                </div>
                                <!--缩略图-->
                                <div class="pic-scroll">
                                    <a class="prev">&lt;</a>
                                    <a class="next">&gt;</a>
                                    <div class="items">
                                        <ul>

                                            <li v-for="(album, index) in goods.goodsalbum_set">
                                                <img :bimg="album.thumb_path"
                                                     :src="album.original_path"
                                                     onmousemove="preview(this);"/>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                                <!--缩略图-->
                            </div>
                            <!--/幻灯片-->
                        </div>
                        <!--/商品图片-->

                        <!--商品信息-->
                        <div class="goods-spec">
                            <h1>{{ goods.title }}</h1>
                            <p class="subtitle">{{ goods.sub_title }}</p>
                            <div class="spec-box">
                                <dl>
                                    <dt>货号</dt>
                                    <dd id="commodityGoodsNo">{{ goods.goods_no }}</dd>
                                </dl>
                                <dl>
                                    <dt>市场价</dt>
                                    <dd><s id="commodityMarketPrice">¥{{ goods.market_price }}</s></dd>
                                </dl>
                                <dl>
                                    <dt>销售价</dt>
                                    <dd><em class="price" id="commoditySellPrice">¥{{ goods.sell_price }}</em></dd>
                                </dl>
                            </div>

                            <div class="spec-box">
                                <dl>
                                    <dt>购买数量</dt>
                                    <dd>
                                        <div class="stock-box">
                                            <input id="commodityChannelId" type="hidden" value="2"/>
                                            <input id="commodityArticleId" type="hidden" value="88"/>
                                            <input id="commodityGoodsId" type="hidden" value="0"/>
                                            <input id="commoditySelectNum" type="text" maxlength="9" v-model="count"
                                                   maxValue="198" onkeydown="return checkNumber(event);"/>
                                            <a class="add" @click="on_increment">+</a>
                                            <a class="remove" @click="on_decrement">-</a>
                                        </div>
                                        <span class="stock-txt">
                                        库存<em id="commodityStockNum">{{ goods.stock }}</em>件
                                    </span>
                                    </dd>
                                </dl>
                                <dl>
                                    <dd>
                                        <div class="btn-buy" id="buyButton">
                                            <a class="add" @click="addToCart" href="javascript:;">加入购物车
                                            </a>
                                        </div>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                        <!--/商品信息-->
                    </div>

                    <div id="goodsTabs" class="goods-tab bg-wrap">
                        <!--选项卡-->
                        <div id="tabHead" class="tab-head">
                            <ul>
                                <li>
                                    <a class="selected" href="javascript:;">商品介绍</a>
                                </li>
                                <li>
                                    <a href="javascript:;">商品评论</a>
                                </li>
                            </ul>
                        </div>
                        <!--/选项卡-->

                        <!--选项内容-->
                        <div class="tab-content entry" style="display:block;"
                             v-html="goods.content">
                        </div>

                        <div class="tab-content">
                            <!--网友评论-->
                            <div class="comment-box">
                                <!--取得评论总数-->
                                <form id="commentForm" name="commentForm" class="form-box"
                                      url="">
                                    <div class="avatar-box">

                                        <i class="iconfont icon-user-full"></i>

                                    </div>
                                    <div class="conn-box">
                                        <div class="editor">
                                        <textarea id="txtContent" name="txtContent" sucmsg=" " datatype="*10-1000"
                                                  nullmsg="请填写评论内容！"></textarea>
                                        </div>
                                        <div class="subcon">
                                            <input id="btnSubmit" name="submit" type="submit" value="提交评论"
                                                   class="submit"/>
                                            <strong>验证码：</strong>
                                            <input id="txtCode" name="txtCode" class="code"
                                                   onkeydown=""
                                                   type="text" sucmsg=" " datatype="s4-4" errormsg="请填写4位验证码"
                                                   nullmsg="请填写验证码！"/>
                                            <a href="javascript:;"
                                               onclick="">
                                                <img width="80" height="22" src=""> 看不清楚？
                                            </a>
                                        </div>
                                    </div>
                                </form>

                                <ul id="commentList" class="list-box"></ul>

                                <!--放置页码-->
                                <div class="page-box" style="margin:5px 0 0 62px">
                                    <div id="pagination" class="digg"></div>
                                </div>
                                <!--/放置页码-->
                            </div>
                            <!--/网友评论-->
                        </div>

                    </div>

                </div>
                <!--/页面左边-->

                <!--页面右边-->
                <div class="left-220">
                    <div class="bg-wrap nobg">

                        <div class="sidebar-box">
                            <h4>推荐商品</h4>
                            <ul class="side-img-list">
                                <li v-for="(goods, index) in recommend_goods">
                                    <div class="img-box">
                                        <a :href="'goods_detail.html?id=' + goods.id">
                                            <img :src="goods.img_url"/>
                                        </a>
                                    </div>
                                    <div class="txt-box">
                                        <a :href="'goods_detail.html?id=' + goods.id">{{ goods.title }}</a>
                                        <span>{{ goods.create_time | formatDate }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--/页面右边-->
            </div>
        </div>
    </div>
</div>

<!--页面底部-->
<div id="footer"></div>
<script>$("#footer").load("_footer.html");</script>
<!--/页面底部-->

<script src="js/axios-0.18.0.min.js"></script>
<script src="js/vue-2.5.16.js"></script>
<script src="js/goods_detail.js"></script>


</body>
</html>